<template>
  <div class="service-container">
    <div v-if="currUser.indexOf('admin')===-1" id="normal-box">
      <el-row style="margin-bottom: 62px;padding-bottom: 10px;">
        <el-col
          v-for="(item,index) in tableData"
          :key="index"
          :lg="{span: 6}"
          :md="{span: 8}"
          :sm="{span: 12}"
          style="display: flex;justify-content: center"
        >
          <el-card :body-style="{ padding: '0px' }" class="service-box">
            <!-- <img :src="item.imageUrl" class="image"> -->
            <div class="image-container">
              <el-image
                style="width: 90%; height: 160px"
                :src="item.imageUrl"
                fit="contain"
              />
            </div>
            <div class="service-info">
              <p>服务名称：{{ item.name }}</p>
              <p class="service-introduction">{{ item.introduction }}</p>
              <p class="service-price"><i>¥</i>{{ item.price }}</p>
              <div class="bottom clearfix" style="text-align: right">
                <el-button
                  type="primary"
                  class="button"
                  icon="el-icon-plus"
                  style="padding: 8px;font-size: 12px"
                  @click="openDetailDialog(item.id)"
                >添加</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="cart-fixed">
        <div class="fixed-left">
          <el-badge :value="cart.length" class="item" style="margin-right: 20px">
            <el-button size="large" icon="el-icon-shopping-cart-1" class="btn-cart" @click="drawer=true" />
          </el-badge>
          <span>总金额：<i v-if="userType!==0&&totalPrice!==0" class="original-price">￥{{ totalPrice }}</i><i class="service-price">￥{{ totalPrice*discount }}</i></span>
        </div>
        <div class="fixed-right">
          <label>预约时间：</label>
          <el-date-picker
            v-model="agreeTime"
            type="date"
            placeholder="选择日期"
          />
          <el-button size="large" type="primary" style="margin-left: 20px" @click="launchOrder">立即预约</el-button>
        </div>
      </div>

      <el-drawer
        title="预约申请单"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleBadgeClose"
        @opened="cartInit"
      >
        <el-empty v-show="cart.length===0" description="申请单是空的哟！" :image-size="300" />
        <div v-for="(item,index) in cart" :key="index">
          <span style="margin-right: 10px">{{ item.serviceName }}</span>
          <span style="margin-right: 10px">{{ item.price }}</span>
          <span v-if="item.number" style="margin-right: 10px">{{ item.number }}</span>
          <el-button
            size="medium"
            type="danger"
            title="删除"
            icon="el-icon-delete"
            round
            @click="deleteItem(item.serviceId)"
          />
        </div>
      </el-drawer>

      <service-detail
        :id="detailId"
        :detail-dialog-visible="detailDialogVisible"
        @closeDetailDialog="closeDetailDialog"
        @openDetailDialog="openDetailDialog"
        @getTable="getTable"
        @getCart="getCartList"
      />
    </div>
    <div v-if="currUser.indexOf('admin')!==-1" id="admin-box">
      <el-button size="large" type="primary" @click="addHandler">添加服务</el-button>
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%"
        max-height="560px"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        />
        <!-- <el-table-column
          prop="id"
          label="id"
          width="200"
          align="center"
        /> -->
        <el-table-column
          label="服务名称"
          prop="name"
          width="200"
          align="center"
        />
        <el-table-column
          prop="introduction"
          label="介绍"
          width="400"
          align="left"
          header-align="center"
        />
        <el-table-column
          prop="materialName"
          label="消耗材料"
          width="200"
          align="center"
        />
        <el-table-column
          label="价格"
          prop="price"
          width="100"
          align="center"
        />
        <el-table-column
          label="是否消耗数量"
          prop="isConsumeNum"
          width="130"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.isConsumeNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="medium"
              icon="el-icon-edit-outline"
              title="编辑"
              round
              @click="editHandler(scope.$index, scope.row)"
            />
            <el-button
              size="medium"
              type="danger"
              title="删除"
              icon="el-icon-delete"
              round
              @click="handleDelete(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="tableQuery.page"
        :page-size="tableQuery.pageSize"
        :hide-on-single-page="isHidePage"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      />
      <add-dialog
        :id="chooseData.id"
        :dialog-visible="dialogFormVisible"
        :dialog-title="dialogTitle"
        @closeDialog="closeHandler"
        @addDialog="addHandler"
        @editDialog="editHandler"
        @getTable="getTable"
      />
    </div>
  </div>
</template>

<script>
import addDialog from './components/addDialog'
import { getServiceList, addOrder } from '@/api/beautyService'
import ServiceDetail from './components/serviceDetail'
import { getCart, setCart, removeCart } from '@/utils/auth'
import { Message } from 'element-ui'

export default {
  name: 'BeautyService',
  components: { addDialog, ServiceDetail },
  data() {
    return {
      currUser: this.$store.getters.roles,
      drawer: false,
      listLoading: false,
      dialogFormVisible: false, // 对话框是否隐藏
      dialogTitle: '',
      detailDialogVisible: false,
      tableData: null,
      chooseData: {
        id: ''
      },
      detailId: '',
      tableQuery: {
        page: 1,
        pageSize: 10
      },
      total: 0, // 表格总数
      isHidePage: false, // 是否隐藏分页,
      cart: [],
      totalPrice: 0,
      agreeTime: '',
      discount: this.$store.state.user.discount,
      userType: this.$store.state.user.type
    }
  },
  created() {
    this.getTable()
    this.getCartList()
  },
  methods: {
    handleBadgeClose(done) {
      done()
    },
    getTable() {
      // if (this.currUser.indexOf('admin') !== -1) {
      //   this.tableQuery.page = 1
      //   this.tableQuery.pageSize = 5
      // }
      getServiceList(this.tableQuery).then(res => {
        this.tableData = res.data.list
      })
    },
    getCartList() {
      this.cart = getCart() && JSON.parse(getCart()) || []
      let cost = 0
      if (this.cart.length !== 0) {
        this.cart.forEach(item => {
          if (item.number !== 0) {
            cost += item.number * item.price
          } else {
            cost += item.price
          }
        })
      }
      this.totalPrice = cost
    },
    cartInit() {
      this.cart = getCart() && JSON.parse(getCart()) || []
    },
    addHandler() {
      this.dialogFormVisible = true
      this.dialogTitle = '添加服务'
    },
    openDetailDialog(id) {
      this.detailDialogVisible = true
      this.detailId = id
    },
    editHandler(index, row) {
      this.dialogFormVisible = true
      this.chooseData.id = row.id
      this.dialogTitle = '修改服务'
    },
    closeHandler() {
      this.dialogFormVisible = false
      this.chooseData = {
        id: ''
      }
    },
    closeDetailDialog() {
      this.detailDialogVisible = false
      this.detailId = ''
    },
    deleteItem(id) {
      this.cart = this.cart.filter(item => item.serviceId !== id)
      setCart(this.cart)
      this.getCartList()
    },
    launchOrder() {
      if (this.cart.length === 0 || !this.agreeTime) {
        Message({
          message: '请先选择服务和预约时间！',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      const query = {}
      query.customer = this.$store.getters.name
      query.cost = this.totalPrice
      query.agreeTime = this.agreeTime
      this.cart.forEach(item => {
        delete item.serviceName
        delete item.materialName
        delete item.price
      })
      const serviceList = this.cart
      query.serviceList = serviceList
      addOrder(query).then(res => {
        if (res) {
          Message({
            message: res.data.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.cart = []
          this.totalPrice = 0
          removeCart()
        }
      })
    },
    handleCurrentChange(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handlePreClick(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handleNextClick(val) {
      this.tableQuery.page = val
      this.getTable()
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
}
// #normal-box{
//   background: url('../../assets/bg_img/bg1.jpg') no-repeat;
//   background-size: 100% 100%;
//   background-attachment: fixed;
// }
#admin-box{
  padding: 10px;
  .el-table{
    margin-top: 10px;
    height: 560px;
  }
  .el-pagination{
    margin-top: 9px;
    padding: 0;
  }
}
.original-price{
  color: #000;
  font-size: 16px;
  font-weight: 700;
  font-family: arial, sans-serif;
  font-style: normal;
  margin-right: 3px;
  text-decoration: line-through;
}
.service-price{
  color: #e1251b;
  font-size: 20px;
  font-weight: 700;
  font-family: arial,sans-serif;
  font-style: normal;
}
.cart-fixed{
  // width: 100%;
  height: 60px;
  // line-height: 75px;
  position: fixed;
  margin-left: 0px;
  bottom: 0;
  z-index: 999;
  background-color: #ccc;
  .fixed-left{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
  }
  .fixed-right{
    margin-left: 881px;
    margin-top: 10px;
    margin-right: 10px;
  }
  .btn-cart{
    padding: 3px 13px;
    font-size: 30px;
  }
}
.service-container{
  .service-box{
    width: 300px;margin-top: 10px;
    .image-container{
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
    .service-info{
      padding: 14px;
      .service-introduction{
        height: 48px;
        font-size: 14px;
        line-height: 24px;
        text-align: left;
        color: #666;
        -webkit-transition: color .2s ease;
        transition: color .2s ease;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .service-price{
          color: #e1251b;
          font-size: 20px;
          font-weight: 700;
          font-family: arial,sans-serif;
        i{
          font-style: normal;
          vertical-align: middle;
          font-size: 12px;
          font-weight: 700;
          font-family: MicrosoftYahei-regular,Arial,Helvetica,sans-serif;
          margin-right: 3px;
        }
      }
    }
  }
}
.el-card__body{

}
</style>
